<template>
  <div class="app">
    <!-- 背景 -->
    <div class="background"></div>

    <!-- 顶部 Logo -->
    <div class="logo">
      <img src="@/assets/index/eat-logo.png" alt="Logo" />
    </div>

    <!-- 中间内容 -->
    <div class="content">
      <h1 class="title">{{ currentDish }}</h1>
      <el-button v-if="!isRunning" type="primary" @click="startRandom">{{startText}}</el-button>
      <el-button v-if="isRunning" type="danger" @click="stopRandom">停止</el-button>
      <div class="actions">
        <el-button type="text" @click="customize">自定义</el-button>
        <el-button type="text" @click="openMoreDialog">更多</el-button>
      </div>
    </div>
    <FoodCustomizeDialog
    :visible.sync="isCustomizeDialogVisible"/>
    <MoreDialog :visible.sync="isMoreDialogVisible" />
  </div>
  
</template>
<script>
  import FoodCustomizeDialog from "./components/FoodCustomizeDialog.vue";
  import MoreDialog from "./components/MoreDialog.vue";
  import { mapGetters } from "vuex";
  export default {
    name: 'MoreView',
    data() {
      return {
        currentDish: "铁板烧",
        startText:"吃什么？",
        isRunning:false,
        isCustomizeDialogVisible: false, // 控制对话框显示
        isMoreDialogVisible:false
      };
    },
    components: {
      FoodCustomizeDialog,
      MoreDialog
    },
    computed: {
      ...mapGetters(["selectedGroupFoods"]), // 获取当前选择的组别的食物
    },
    methods:{
      ToMore(){
        this.$router.push("/more")
      },
      customize() {
        this.isCustomizeDialogVisible = true;
      },
      openMoreDialog() {
        this.isMoreDialogVisible = true;
      },
      startRandom() {
        this.isRunning = true;
        this.startText = "不行，换一个";
        this.timer = setInterval(() => {
          const randomIndex = Math.floor(Math.random() * this.selectedGroupFoods.length);
          this.currentDish = this.selectedGroupFoods[randomIndex];
        }, 100); // 每 100 毫秒切换一次
      },
      // 停止随机显示
      stopRandom() {
        this.isRunning = false;
        clearInterval(this.timer); // 清除定时器
      },
    },
    created(){
      const randomIndex = Math.floor(Math.random() * this.selectedGroupFoods.length);
      this.currentDish = this.selectedGroupFoods[randomIndex];
    }
  }
  </script>

<style scoped>
  /* 背景样式 */
  .background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    background-image: url("@/assets/index/eat-bg.jpg");
    background-repeat: repeat;
    z-index: -1;
  }
  
  /* Logo 样式 */
  .logo {
    text-align: center;
    margin-top: 50px;
  }
  
  .logo img {
    width: 150px;
  }
  
  /* 中间内容样式 */
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px; /* 高度的一半 */
    margin-left: -250px; /* 宽度的一半 */
    width: 500px;
    height: 120px;
    text-align: center;
  }
  
  .title {
    font-size: 36px;
    color: #ff7f00;
    margin-bottom: 20px;
  }
  
  .actions {
    margin-top: 20px;
  }
  
  .actions .el-button {
    margin: 0 10px;
  }
  </style>